<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="app1">
			<p>{{foo}}</p>
			<button v-on:click="foo='abz'">change it</button>
		</div>
		<script type="text/javascript">
			/*//我梦的数据对象
			var data = {a : 1};
			console.log(data);
			//该对象被加入到一个Vue实例中
			var vm = new Vue({
				data:data
			});
			//获得这个实例上的property
			//返回数据源中对应的字段
			vm.a == data.a;//=>true
			console.log(vm.a);
			//设置property也会影响到数据原始数据
			vm.a = 2;
			data.a;//=>2
			//反之亦然
			data.a  = 3;
			vm.a;*/
			
			var obj = {
				foo:'bar'
			};
			//Object.freeze(obj);//Object.freeze()防止现有property被修改
			new Vue({
				el:'#app1',
				data:obj
			});
			
			var data = { a:1}
			var vm = new Vue({
				el:'#example2',
				data:data
			})
			
			vm.$data === data
			vm.$el === document.getElementById('example2')
			//$watch是一个实例方法
			vm.$watch('a',founction(newVal,oldVal){
				
			})
			
			
		</script>
	</body>
</html>
